<template>
    <div class="plugin-config">
        <div class="plugin-header">
            <div class="plugin-header-left super-editor-flex">
                <div class="super-editor-button-box" @click="handleClick" v-show="buttonShow">
                    <el-icon>
                        <ArrowRightBold />
                    </el-icon>
                </div>
                <div class="plugin-header-title">插件配置</div>
            </div>
        </div>
        <el-form>
            <el-scrollbar height="600px" class="plugin-info-scrollbar">
                <div class="plugin-info">
                    <div class="plugin-info-header super-editor-flex" @click="showRole">
                        <el-icon v-if="isRoleShow">
                            <ArrowDownBold />
                        </el-icon>
                        <el-icon v-else>
                            <ArrowRightBold />
                        </el-icon>
                        <Bot :size="18"/>
                        <div class="plugin-info-item-title">角色设定</div>
                    </div>
                    <div class="plugin-info-body" v-show="isRoleShow">
                        <el-input v-model="props.plugin.prompt" autosize type="textarea" />
                    </div>
                </div>

                <div class="plugin-info">
                    <div class="plugin-info-header super-editor-flex" @click="showAssign">
                        <el-icon v-if="isAssignShow">
                            <ArrowDownBold />
                        </el-icon>
                        <el-icon v-else>
                            <ArrowRightBold />
                        </el-icon>
                        
                        <CircleUser :size="18"/>
                        <div class="plugin-info-item-title">助手信息</div>
                    </div>
                    <div class="plugin-info-body" v-show="isAssignShow">
                        <div class="plugin-info-item super-editor-flex-between">
                            <div class="plugin-info-item-left">头像</div>
                            <div class="plugin-info-item-right">
                                <el-popover placement="left" :width="310" trigger="click"
                                    popper-style="plugin-info-logo-emoji">
                                    <template #reference>
                                        <div class="super-editor-avatar-circle">
                                            <span class="plugin-info-logo">
                                                {{ props.plugin.logo }}
                                            </span>
                                        </div>
                                    </template>
                                    <EmojiPicker :native="true" @select="onSelectEmoji" />
                                </el-popover>
                            </div>
                        </div>
                        <div class="plugin-info-item super-editor-flex-between">
                            <div class="plugin-info-item-left">名字</div>
                            <div class="plugin-info-item-right"><el-input v-model="props.plugin.name" /></div>
                        </div>
                        <div class="plugin-info-item super-editor-flex-between">
                            <div class="plugin-info-item-left">描述</div>
                            <div class="plugin-info-item-right">
                                <el-input v-model="props.plugin.describe" autosize type="textarea" />
                            </div>
                        </div>

                        <div class="plugin-info-item super-editor-flex-between plugin-info-item-nobottom">
                            <div class="plugin-info-item-left">类型</div>
                            <div class="plugin-info-item-right">
                                <el-select v-model="props.plugin.type" class="m-2" placeholder="Select">
                                    <el-option v-for="item in pluginTypes" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="plugin-info">
                    <div class="plugin-info-header super-editor-flex" @click="showModel">
                        <el-icon v-if="isModelShow">
                            <ArrowDownBold />
                        </el-icon>
                        <el-icon v-else>
                            <ArrowRightBold />
                        </el-icon>
                        <BrainCog :size="18"/>
                        <div class="plugin-info-item-title">模型信息</div>
                    </div>
                    <div class="plugin-info-body" v-show="isModelShow">
                        <div class="plugin-info-item super-editor-flex-between">
                            <div class="plugin-info-item-left">模型</div>
                            <div class="plugin-info-item-right">
                                <el-select v-model="props.plugin.model" class="m-2" placeholder="请选择模型">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </div>
                        </div>
                        <div class="plugin-info-item super-editor-flex-between plugin-info-item-nobottom">
                            <div class="plugin-info-item-left">随机性</div>
                            <div class="plugin-info-item-right">
                                <el-slider v-model="props.plugin.temperature" :min="0" :max="10" />
                            </div>
                        </div>

                    </div>
                </div>
            </el-scrollbar>
            <div class="plugin-footer">
                <el-button type="primary" @click="pluginSave" color="#222222">保存</el-button>
            </div>
        </el-form>
    </div>
</template>

<script setup>
import { ref, reactive, watch, inject } from 'vue'
import { createPlugin, updatePlugin } from '@/api/plugin'
import { ElMessage } from 'element-plus'
import { Bot,CircleUser,BrainCog } from 'lucide-vue-next';

import EmojiPicker from 'vue3-emoji-picker'
import 'vue3-emoji-picker/css'

const props = defineProps({
    plugin: {
        type: Object,
        default: {},
    },
    edit: {
        type: Boolean,
        default: false
    },
    query: {
        type: String,
        default: ''
    }
})
const buttonShow = ref(true)

const userAction = inject('userAction')
const handleClick = () => {
    userAction(props.plugin, 'chat')
}

// 后面需要服务器返回
const options = [
    {
        value: 'gpt-3.5',
        label: 'gpt-3.5',
    },
    {
        value: 'chatglm-3',
        label: 'chatglm-3',
    },
]
// 后面需要服务器返回
const pluginTypes = [
    {
        value: 'spider',
        label: '爬虫类',
    },
    {
        value: 'editor',
        label: '编辑器插件',
    },
    {
        value: 'llm',
        label: '大模型类',
    },
    {
        value: 'data',
        label: '数据处理类',
    }
]

const isRoleShow = ref(true)
const showRole = () => {
    isRoleShow.value = !isRoleShow.value
}

const isAssignShow = ref(true)
const showAssign = () => {
    isAssignShow.value = !isAssignShow.value
}

const isModelShow = ref(true)
const showModel = () => {
    isModelShow.value = !isModelShow.value
}

const pluginSave = () => {
    if (('' + props.plugin.id).startsWith('new')) {
        createPlugin(props.plugin).then(result => {
        })
    } else {
        updatePlugin(props.plugin).then(result => {
            ElMessage.success('保存成功');
        })
    }

}

function onSelectEmoji(emoji) {
    props.plugin.logo = emoji.i
}

watch(() => props.plugin, (newVal, oldVal) => {
    isRoleShow.value = true
    isAssignShow.value = true
    isModelShow.value = true

})
</script>

<style scoped>


/*deep*/
.v3-emoji-picker {
    box-shadow: 0 0 0 #FFF;
    height: 400px;
}

.plugin-config {
    border-left: 1px solid #eee;
    margin-left: 10px;
}

.plugin-header {
    height: var(--supereditor-header-height);
    line-height: var(--supereditor-header-height);
    border-bottom: 1px solid #eee;
    text-align: center;
    padding: 0 10px;
}

.plugin-header-title {
    font-size: 18px;
    font-weight: bold;
    margin-left: 10px;
}

.plugin-config {
    /* padding: 0 10px; */
}

.plugin-info-scrollbar {
    /* padding: 10px; */
    height: calc(100vh - var(--supereditor-header-height) - 50px);
}

.plugin-info {
    border-radius: 8px;
    border: 1px solid #eee;
    background-color: var(--supereditor-primary-item-color);
    margin: 20px 10px;
}

.plugin-info-header {
    font-size: 16px;
    font-weight: bold;
    margin: 10px;
    gap: 10px;
    cursor: pointer;
}

.plugin-info-body {
    background-color: #fff;
    border-radius: 0 0 8px 8px;
    padding: 10px;
    font-size: 14px;
}

.plugin-info-item {
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.plugin-info-item-left {
    font-weight: 500;
}

.plugin-info-item-right {
    width: 194.5px;
    text-align: right;
}

.plugin-info-logo-emoji {
    padding: 0 5px;
}

.plugin-info-logo {
    /* position: relative; */
    font-size: 30px;
    height: 32px;
    width: 32px;
    line-height: 1;
    text-align: center;
    cursor: pointer;
}


.plugin-info-item-nobottom {
    border-bottom: 0px;
}

.plugin-footer {
    /* text-align: right; */
    height: 50px;
    padding-left: 20px;
    padding-top: 5px;
}
</style>